<template>
	<view class="msg_call">
		<text class="call-icon u-font-40 u-m-x-4" :class="{'cuIcon-recordfill':msg.extras.type=='video','cuIcon-dianhua':msg.extras.type=='voice'}"></text>
		<text class="u-m-x-4">{{msg.content}}</text>
		<text class="u-m-x-4" v-if="msg.extras.duration">{{msg.extras.duration|duration}}</text>
	</view>
</template>

<script>
	import {decodeText} from '@/utils/emojiMap.js'
	export default{
		props:{
			msg:{
				type:Object,
				required:true
			}
		},
		computed:{
			contentList() {
			  return decodeText(this.content)
			}
		},
		filters:{
			duration(val=0){
				const m = Math.floor(val/60)
				const s = val%60
				return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_call{
		position: relative;
		padding: 14rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		max-width: 400rpx;
		border-radius: 0 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		&::before{
			position: absolute;
			content: '';
			border-width: 10rpx;
			border-style: solid;
			border-color: #FFFFFF #FFFFFF transparent transparent;
			top: 0;
			left: -8rpx;
		}
	}
	.self{
		.msg_call{
			background-color: #cfe7ff;
			border-radius: 10rpx 0 10rpx 10rpx;
			&::before{
				content: none;
			}
			&::after{
				position: absolute;
				content: '';
				border-width: 10rpx;
				border-style: solid;
				border-color: #cfe7ff transparent transparent  #cfe7ff;
				top: 0;
				right: -8rpx;
			}
		}
		.call-icon{
			order: 1;
			transform: rotateY(180deg);
		}
	}
</style>
